<!-- 首页 -->
<template>
	<view class="home-wrap u-m-b-20">
		<!-- 空白页 -->
		<!-- #ifdef APP-PLUS -->
		<u-no-network @retry="init"></u-no-network>
		<!-- #endif -->
	

		<view v-if="isConnected && isRefresh" class="content-box">
		 
			<!-- 自定义模块 -->
			<view class="template-box">
				<block v-for="(item, index) in themeList" :key="item.id">
					<!-- 轮播 (已完成)-->
					<sh-banner v-if="index == 0"  :list="item.themeFloorContents">
					</sh-banner>

					<!-- 拼团 -->
					<sh-groupon v-if="index == 1" :detail="item"></sh-groupon>
					
					<!-- 富文本 -->
		        	<sh-pinpai v-if="index == 2" :detail="item"></sh-pinpai>
					<!-- 功能标题 -->
					<sh-title-card v-if="item.type === 'title-block'" :title="item.content.name"
						:bgImage="item.content.image" :titleColor="item.content.color"></sh-title-card>
					<!-- 直播 -->
					<!-- #ifdef MP-WEIXIN -->
					<sh-live v-if="item.type === 'live' && HAS_LIVE" :detail="item.content"></sh-live>
					<!-- #endif -->
				</block>
			</view>

			<!-- 分类选项卡 -->
			<sh-category-tabs
				v-if="categoryTabsData && categoryTabsData.category_arr && categoryTabsData.category_arr.length"
				:enable="enable" :styleType="categoryTabsData.style" :tabsList="categoryTabsData.category_arr">
			</sh-category-tabs>
	 
		 
		 
		</view>
		<!-- <ljshop-tabbar></ljshop-tabbar> -->
	</view>
</template>

<script>
	import shBanner from './components/sh-banner.vue';
	

	import shPinpai from './components/sh-pinpai.vue';
	import shGroupon from './components/sh-groupon.vue';
	import shDianpu from './components/sh-dianpu.vue';
	
	import shCategoryTabs from './components/sh-category-tabs.vue';

 

	export default {
		components: {
			shBanner,
			shGroupon,
			shCategoryTabs,


		},
		data() {
			return {
				// #ifdef MP-WEIXIN
				HAS_LIVE: HAS_LIVE,
				// #endif
				isRefresh: true,

				enable: false, //是否开启吸顶。
				isConnected: true, //是否有网
				showPrivacy: false, //协议
				isScorll: false,
				themeList:[]
			};
		},
		computed: {
		 
	 
			// 分类选项卡数据
			categoryTabsData() {
				if (this.homeTemplate?.length) {
					return this.homeTemplate[this.homeTemplate.length - 1]?.content;
				}
			}
		},
		onPullDownRefresh() {
			this.init();
		},
		onPageScroll(e) {
			this.isScorll = e.scrollTop > 100 ? true : false;
		},
		onShow() {
		  this.init();
		},
		onHide() {
			this.enable = false;
		},
		onLoad() {
			// #ifdef APP-PLUS
			// app隐私协议弹窗
			if (!plus.runtime.isAgreePrivacy()) {
				this.showPrivacy = true;
				this.showNoticeModal = false;
			}
			// #endif
		},
		methods: {
			init() {
				let that = this;
				 that.$http(
				 	'goods.gettheme',
					{
					themeId:1	
					}
				 ).then(res => {
					 //console.info(JSON.stringify(res))
				 	if (res.code === 1) {
						that.themeList= res.theme.themeFloors;
				 	}
				 });
			}
		}
	};
</script>

<style lang="scss"></style>
